<template>
  <div class="app-container">
    <el-button class="addbutton" type="primary" @click="add">添加</el-button>
    <el-table :data="order_list" v-loading.body="listLoading" element-loading-text="Loading" :default-sort="{prop: 'date', order: 'ascending'}" border fit highlight-current-row>

      <el-table-column type="expand">
        <template slot-scope="scope">
          <el-form label-position="left" inline class="table-expand">
            <el-form-item label="航班名称">
              <span>{{ scope.row.Flight_company_name }}</span>
            </el-form-item>
            <el-form-item label="出发地">
              <span>{{ scope.row.Departure_Location }}</span>
            </el-form-item>
            <el-form-item label="目的地">
              <span>{{ scope.row.Arrival_location }}</span>
            </el-form-item>
            <el-form-item label="航班日期">
              <span>{{scope.row.Flight_departure_time | formatDate}} -至- {{scope.row.Flight_arrival_time | formatDate}}</span>
            </el-form-item>
            <el-form-item label="是否为往返">
              <span>{{ scope.row.Back.back | backstatus}}</span>
            </el-form-item>
            <div v-show="scope.row.Back.back">
              <el-form-item label="出发地">
                <span>{{ scope.row.Back.Departure_Location }}</span>
              </el-form-item>
              <el-form-item label="目的地">
                <span>{{ scope.row.Back.Arrival_location }}</span>
              </el-form-item>
              <el-form-item label="返回航班日期">
                <span>{{scope.row.Back.Flight_departure_time | formatDate}} -至- {{scope.row.Back.Flight_arrival_time | formatDate}}</span>
              </el-form-item>
            </div>
          </el-form>
        </template>
      </el-table-column>

      <el-table-column label="航班公司" width="239" align="center">
        <template slot-scope="scope">
          <span>{{scope.row.Flight_company_name}}</span>
        </template>
      </el-table-column>
      <el-table-column label="飞机型号" width="100" align="center">
        <template slot-scope="scope">
          {{scope.row.Aircraft_type}}
        </template>
      </el-table-column>
      <el-table-column label="航线" width="155" align="center">
        <template slot-scope="scope">
          {{scope.row.Departure_Location}} → {{scope.row.Arrival_location}}
        </template>
      </el-table-column>
      <el-table-column align="center" prop="created_at" label="航班时间" sortable>
        <template slot-scope="scope">
          <i class="el-icon-time"></i>
          <span>{{scope.row.Flight_departure_time | formatDate}}至{{scope.row.Flight_arrival_time | formatDate}}</span>
        </template>
      </el-table-column>
      <el-table-column label="是否往返" width="100" align="center">
        <template slot-scope="scope" v-if="scope.row.Back">
          <el-tag :type="scope.row.Back.back | statusFilter">{{ scope.row.Back.back | backstatus}}</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="机票价格（往返为总价）" width="210" align="center">
        <template slot-scope="scope">
          <el-tag :type="scope.row.discount | statusFilter">￥{{(scope.row.Money+scope.row.Back.Money)/100}}</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="折扣" width="150" align="center">
        <template slot-scope="scope">
          <el-tag :type="scope.row.discount | statusFilter">{{scope.row.discount | statusdisplay}}</el-tag>
        </template>
      </el-table-column>

      <el-table-column label="操作" align="center" width="190">
        <template slot-scope="scope">
          <el-button size="mini" type="primary" @click="edit_air(scope.row)">修改</el-button>
          <el-button size="mini" type="danger" @click="fail_order(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog :title="title" :visible.sync="dialogFormVisible">
      <el-form :model="form" status-icon :rules="rules" ref="form">
        <el-form-item label="航空公司：" :label-width="formLabelWidth" prop="Flight_company_name">
          <el-input v-model="form.Flight_company_name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="飞机型号：" :label-width="formLabelWidth" prop="Aircraft_type">
          <el-input v-model="form.Aircraft_type" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="出发地：" :label-width="formLabelWidth" prop="Departure_Location">
          <el-input v-model="form.Departure_Location" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="目的地：" :label-width="formLabelWidth" prop="Arrival_location">
          <el-input v-model="form.Arrival_location" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="航班出发时间：" :label-width="formLabelWidth" prop="Flight_departure_time">
          <el-date-picker v-model="form.Flight_departure_time" placeholder="选择时间" type="datetime"></el-date-picker>
        </el-form-item>
        <el-form-item label="航班抵达时间：" :label-width="formLabelWidth" prop="Flight_arrival_time">
          <el-date-picker v-model="form.Flight_arrival_time" placeholder="选择时间" type="datetime"></el-date-picker>
        </el-form-item>
        <el-form-item label="是否为折扣：" :label-width="formLabelWidth">
          <el-select v-model="form.discount" placeholder="不选择默认为不折扣" class="select-width">
            <el-option label="是" value=true></el-option>
            <el-option label="否" value=false></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="机票价钱：" :label-width="formLabelWidth" prop="Money">
          <el-input v-model="form.Money" autocomplete="off" placeholder="为人名币价格"></el-input>
        </el-form-item>
        <el-form-item label="设置航程：" :label-width="formLabelWidth">
          <el-switch v-model="form.Back.back" active-text="往返" inactive-text="单程"></el-switch>
        </el-form-item>
      </el-form>
      <div v-if="form.Back.back">
        <el-form :model="form.Back" status-icon :rules="rules" ref="form">
          <el-form-item label="航空公司：" :label-width="formLabelWidth" prop="Flight_company_name">
            <el-input v-model="form.Back.Flight_company_name" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="出发地：" :label-width="formLabelWidth" prop="Departure_Location">
            <el-input v-model="form.Back.Departure_Location" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="目的地：" :label-width="formLabelWidth" prop="Arrival_location">
            <el-input v-model="form.Back.Arrival_location" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="飞机型号：" :label-width="formLabelWidth" prop="Aircraft_type">
            <el-input v-model="form.Back.Aircraft_type" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="机票价钱：" :label-width="formLabelWidth" prop="Money">
            <el-input v-model="form.Back.Money" autocomplete="off" placeholder="为人名币价格"></el-input>
          </el-form-item>
          <el-form-item label="航班出发时间：" :label-width="formLabelWidth" prop="Flight_departure_time">
            <el-date-picker v-model="form.Back.Flight_departure_time" placeholder="选择时间" type="datetime"></el-date-picker>
          </el-form-item>
          <el-form-item label="航班抵达时间：" :label-width="formLabelWidth" prop="Flight_arrival_time">
            <el-date-picker v-model="form.Back.Flight_arrival_time" placeholder="选择时间" type="datetime"></el-date-picker>
          </el-form-item>
        </el-form>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="add_air">提交</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getair } from "@/api/table";
import { modifyitem } from "@/api/table";
import { formatDate } from "@/utils/formatdate";
import { addair } from "@/api/table";
import { editair } from "@/api/table";
import { dele } from "@/api/table";
export default {
  data() {
    const validateFlight_company_name = (rule, value, callback) => {
      if (value.length == 0) {
        callback(new Error("请输入航空公司"));
      } else {
        callback();
      }
    };
    const validateAircraft_type = (rule, value, callback) => {
      if (value.length == 0) {
        callback(new Error("请输入飞机型号"));
      } else {
        callback();
      }
    };
    const validateDeparture_Location = (rule, value, callback) => {
      if (value.length == 0) {
        callback(new Error("出发地不能为空"));
      } else {
        callback();
      }
    };
    const validateArrival_location = (rule, value, callback) => {
      if (value.length == 0) {
        callback(new Error("目的地不能为空"));
      } else {
        callback();
      }
    };
    const validateFlight_departure_time = (rule, value, callback) => {
      if (value.length == 0) {
        callback(new Error("出发时间不能为空"));
      } else {
        callback();
      }
    };
    const validateFlight_arrival_time = (rule, value, callback) => {
      if (value.length == 0) {
        callback(new Error("抵达时间不能为空"));
      } else {
        callback();
      }
    };
    const validateMoney = (rule, value, callback) => {
      if (value.length == 0) {
        callback(new Error("真的确认免单么？机票价格可不能为空哦"));
      } else {
        callback();
      }
    };
    return {
      list: null,
      title: "",
      listLoading: false,
      order_list: [],
      dialogFormVisible: false,
      formLabelWidth: "140px",
      form: {
        Flight_company_name: "",
        Aircraft_type: "",
        Departure_Location: "",
        Arrival_location: "",
        Flight_departure_time: "",
        Flight_arrival_time: "",
        discount: false,
        Money: "",
        Back: {
          //是否返程
          back: false,
          Departure_date: "", // 出发日期
          Flight_departure_time: "", // 航班出发时间
          Flight_arrival_time: "", // 航班抵达时间
          Departure_Location: "", // 出发地点
          Arrival_location: "", // 抵达地点
          Flight_company_name: "", // 航班公司
          Aircraft_type: "", // 飞机型号
          Money: "" //单程机票价格
        }
      },
      rules: {
        Flight_company_name: [
          {
            required: true,
            trigger: "blur",
            validator: validateFlight_company_name
          }
        ],
        Aircraft_type: [
          { required: true, trigger: "blur", validator: validateAircraft_type }
        ],
        Departure_Location: [
          {
            required: true,
            trigger: "blur",
            validator: validateDeparture_Location
          }
        ],
        Arrival_location: [
          {
            required: true,
            trigger: "blur",
            validator: validateArrival_location
          }
        ],
        Flight_departure_time: [
          {
            required: true,
            trigger: "blur",
            validator: validateFlight_departure_time
          }
        ],
        Flight_arrival_time: [
          {
            required: true,
            trigger: "blur",
            validator: validateFlight_arrival_time
          }
        ],
        Money: [{ required: true, trigger: "blur", validator: validateMoney }]
      }
    };
  },
  filters: {
    formatDate(time) {
      var date = new Date(time);
      return formatDate(date, "yyyy-MM-dd hh:mm");
    },
    statusFilter(status) {
      const statusMap = {
        true: "success",
        false: "gray"
      };
      return statusMap[status];
    },
    statusdisplay(status) {
      const statusMap = {
        true: "折扣",
        false: "不折扣"
      };
      return statusMap[status];
    },
    backstatus(status) {
      const statusMap = {
        true: "往返",
        false: "单程"
      };
      return statusMap[status];
    }
  },
  created() {
    this.fetchData();
  },
  methods: {
    fetchData() {
      this.listLoading = true;
      getair()
        .then(response => {
          console.log(response);
          this.order_list = response.data;
          this.listLoading = false;
        })
        .catch(err => {
          console.log(err);
          this.listLoading = false;
        });
    },
    edit_air(row) {
      console.log("修改");
      console.log(row);
      this.title = "修改航班";
      this.form = JSON.parse(JSON.stringify(row));
      this.dialogFormVisible = true;
    },
    fail_order(row) {
      console.log("删除");
      this.$confirm("此操作将永久删除该航班, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          console.log(row);
          var data = {
            _id: row._id
          };
          dele(data).then(res => {
            console.log(res);
            this.fetchData();
            this.$message({
              type: "success",
              message: "删除成功!"
            });
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    add_air() {
      this.$refs.form.validate(valid => {
          if (valid) {
            if (this.title == "添加航班") {
              this.form.Money = this.form.Money * 100;
              this.form.Back.Money = this.form.Back.Money * 100;
              let flydata = this.form;
              console.log(flydata);
              addair(flydata).then(res => {
                console.log(res);
                this.dialogFormVisible = false;
                this.form = {
                  Flight_company_name: "",
                  Aircraft_type: "",
                  Departure_Location: "",
                  Arrival_location: "",
                  Flight_departure_time: "",
                  Flight_arrival_time: "",
                  discount: false,
                  Money: "",
                  Back: {
                    //是否返程
                    back: false,
                    Departure_date: "", // 出发日期
                    Flight_departure_time: "", // 航班出发时间
                    Flight_arrival_time: "", // 航班抵达时间
                    Departure_Location: "", // 出发地点
                    Arrival_location: "", // 抵达地点
                    Flight_company_name: "", // 航班公司
                    Aircraft_type: "", // 飞机型号
                    Money: "" //单程机票价格
                  }
                };
                this.fetchData();
              });
            } else {
              this.form.Money = this.form.Money * 100;
              this.form.Back.Money = this.form.Back.Money * 100;
              let edit_flydata = this.form;
              editair(edit_flydata).then(res => {
                console.log(res);
                this.dialogFormVisible = false;
                this.form = {
                  Flight_company_name: "",
                  Aircraft_type: "",
                  Departure_Location: "",
                  Arrival_location: "",
                  Flight_departure_time: "",
                  Flight_arrival_time: "",
                  discount: false,
                  Money: "",
                  Back: {
                    //是否返程
                    back: false,
                    Departure_date: "", // 出发日期
                    Flight_departure_time: "", // 航班出发时间
                    Flight_arrival_time: "", // 航班抵达时间
                    Departure_Location: "", // 出发地点
                    Arrival_location: "", // 抵达地点
                    Flight_company_name: "", // 航班公司
                    Aircraft_type: "", // 飞机型号
                    Money: "" //单程机票价格
                  }
                };
                this.fetchData();
              });
            }
          }
      });
    },
    back(vlue) {
      console.log(vlue);
    },
    add() {
      this.title = "添加航班";
      this.dialogFormVisible = true;
    }
  },
  watch: {}
};
</script>
<style scoped>
.addbutton {
  float: right;
  margin-bottom: 10px;
}
.table-expand {
  font-size: 0;
}
.table-expand label {
  width: 90px;
  color: #99a9bf;
}
.table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}
.imgcon {
  width: 300px;
  height: 300px;
}
.el-input {
  width: 220px;
}
.select-width {
  width: 220px;
}
</style>
